<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript访问DOM数案例</title>
	</head>
	<body>
		<h1>JavaScript访问DOM数案例</h1>
		<h1>JavaScript使用api四种方式，访问h3标签，a标签获取内容</h3></h1>
		<h5>tag,className,name,id</h5>
		
		
		<a href="http://www.taobao.com" target="_blank">淘宝</a>
		<a class="jd" href="http://www.pinduoduo.com" target="_blank">拼多多</a>
		<a name="pdd" href="http://www.jd.com" target="_blank">京东</a>
		<a id="cgb" href="http://act.codeboy.com" target="_blank">java培优</a>
		<!--页面上使用JavaScript，通过script标签实现
		type="text/JavaScript",可以省略
		默认是src=""引入外部
		js中可以使用双引号或者单引号把字符串括起来
		js出错不提示，浏览器F12查错误-->
		<script>
		//window.alert中的Window可省略
		//alert('使用js获取页面元素内容');//bom中提供弹出框api
			
		//获取页面a标签，按tagName返回数组
		//第一个元素:arr[0]，下标从0开始
		//谷歌浏览器提供的console方式,必须f12查看
	
		//alert(document.getElementsByTagName('a')[0]);老方式
		//alert(document.getElementsByTagName('a')[0].innerText);
		
		//第一种tagname
		console.log(document.getElementsByTagName('a')[0].innerText);
		console.log(document.getElementsByTagName('a')[0].href);
		
		//第二种ClassName
		console.log(document.getElementsByClassName('jd')[0].innerText);
		console.log(document.getElementsByClassName('jd')[0].href);
		
		//第三种name
		console.log(document.getElementsByName('pdd')[0].innerText);
		console.log(document.getElementsByName('pdd')[0].href);
		
		//第四种id,获得一个值，无需数组
		console.log(document.getElementById('cgb').innerText);
		console.log(document.getElementById('cgb').href);
		
		//通过JavaScript改变页面值
		//var a =document.getElementsByTagName('a')[0];
		//a.innerText="中国";
		//a.href="http://www.baidu.com";
		
		
		</script>
	</body>
</html>
